<template>
  <div class="transaction f-cb">
    <div class="pb115 f-cb" v-if="stockInfo.detail">
      <div class="account-right-top f-cb" v-if="Object.keys(detail).length > 0">
        <div class="title">
          <div class="symbol_name">
            <p class="titleName">
              {{ stockInfo.detail.name }}
            </p>
            <p>
              {{ stockInfo.detail.symbol }}.{{
                stockInfo.detail.market | Market
              }}
            </p>
          </div>
          <img class="icon" src="@/assets/img/icon_gb1.png" @click="hide" />
        </div>
        <div class="f-cb about-infis">
          <p
            class="fl"
            :class="
              Number(detail.latestPrice) > Number(detail.close)
                ? 'red'
                : Number(detail.latestPrice) == Number(detail.close)
                ? ''
                : 'green'
            "
          >
            <span class="hs1">{{
              Number(detail.latestPrice).toFixed(detail.precision)
            }}</span>
            <!-- 涨跌额 -->
            <span class="smallfonts">
              {{ detail.gain > 0 ? "+" : ""
              }}{{ ((detail.chg * 100) / 100).toFixed(detail.precision) }}</span
            >
            <span class="smallfonts"
              >{{ detail.gain > 0 ? "+" : ""
              }}{{ (detail.gain * 100).toFixed(2) }}%</span
            >
          </p>
          <!-- 行情类型 -->
          <div
            class="fr Icon"
            :class="stockInfo.detail.securityType == 2 ? 'iconDapan' : ''"
          >
            <span class="support">
              <img
                :src="require('@/assets/img/icon_zdx.png')"
                :title="$t('account.account_right.56hpz2m00cw0')"
                v-if="
                  stockInfo.detail.isSupportFinance == 1 &&
                  stockInfo.detail.isSupportShort == 0
                "
              />
              <img
                :src="require('@/assets/img/icon_zkx.png')"
                :title="$t('account.account_right.56hpz2m01b40')"
                v-else-if="
                  stockInfo.detail.isSupportFinance == 0 &&
                  stockInfo.detail.isSupportShort == 1
                "
              />
              <img
                :src="require('@/assets/img/icon_rzrqx.png')"
                :title="$t('account.account_right.56hpz2m01m00')"
                v-else-if="
                  stockInfo.detail.isSupportFinance == 1 &&
                  stockInfo.detail.isSupportShort == 1
                "
              />
            </span>
            <!-- 基础行情等级 -->
            <span
              class="quotation"
              v-if="stockInfo.detail.market == 'HKEX'"
              @click="showLevel(2)"
            >
              <el-tooltip
                class="item"
                effect="dark"
                placement="top-start"
              >
              <!-- 当前为港股Level0基础数据，需手动刷新。您可点击图标查看各市场行情权限 -->
                <i class="tip_i" slot="content" v-if="level.HK.level == 0">{{
                  $t('account.index_dialog.57kmkdliihc0')
                }}</i>
                <!-- 当前为港股Level2实时报价高级行情数据，您可点击图标查看各市场行情权限 -->
                <i class="tip_i" slot="content" v-if="level.HK.level == 2">{{
                  $t('account.index_dialog.57kmkdlijbk0')
                }}</i>
                <img
                  :src="require('@/assets/img/icon_v0x.png')"
                  :title="
                    $t('m.hkStock') + $t('account.account_right.56hpz2j563x80')
                  "
                  v-if="level.HK.level == 0"
                />
                <img
                  :src="require('@/assets/img/icon_v1d.png')"
                  :title="
                    $t('m.hkStock') + $t('account.account_right.56hpz2mff80')
                  "
                  v-else-if="level.HK.level == 1"
                />
                <img
                  :src="require('@/assets/img/icon_v2d.png')"
                  :title="
                    $t('m.hkStock') + $t('account.account_right.56hpz5mqx80')
                  "
                  v-else
                />
              </el-tooltip>
            </span>
            <span
              class="quotation"
              v-else-if="
                stockInfo.detail.market == 'SSE' ||
                stockInfo.detail.market == 'SZSE'
              "
              @click="showLevel(1)"
            >
              <el-tooltip
                class="item"
                effect="dark"
                placement="top-start"
              >
                <i class="tip_i" slot="content" v-if="level.CN.level == 1">{{
                  $t('account.index_dialog.57kmkdlijl80')
                }}</i>
                <i class="tip_i" slot="content" v-if="level.CN.level == 2">{{
                  $t('account.index_dialog.57kmkdlijt00')
                }}</i>
                <img
                  :src="require('@/assets/img/icon_v0x.png')"
                  :title="
                    $t('m.shStock') + $t('account.account_right.56hpz2j563x80')
                  "
                  v-if="level.CN.level == 0"
                />
                <img
                  :src="require('@/assets/img/icon_v1d.png')"
                  :title="
                    $t('m.shStock') + $t('account.account_right.56hpz2mff80')
                  "
                  v-else-if="level.CN.level == 1"
                />
                <img
                  :src="require('@/assets/img/icon_v2d.png')"
                  :title="
                    $t('m.shStock') + $t('account.account_right.56hpz5mqx80')
                  "
                  v-else
                />
              </el-tooltip>
            </span>
            <span
              class="quotation"
              v-else-if="stockInfo.detail.market == 'US'"
              @click="showLevel(3)"
            >
              <el-tooltip
                class="item"
                effect="dark"
                placement="top-start"
              >
              <!-- 当前为美股Level0基础数据，需手动刷新。您可点击图标查看各市场行情权限 -->
                <i class="tip_i" slot="content" v-if="level.US.level == 0">{{
                  $t('account.index_dialog.57kmkdlik1o0')
                }}</i>
                <i class="tip_i" slot="content" v-if="level.US.level == 1">{{
                  $t('account.index_dialog.57kmkdlik9w0')
                }}</i>
                <img
                  :src="require('@/assets/img/icon_v0x.png')"
                  :title="
                    $t('m.usStock') + $t('account.account_right.56hpz2j563x80')
                  "
                  v-if="level.US.level == 0"
                />
                <img
                  :src="require('@/assets/img/icon_v1d.png')"
                  :title="
                    $t('m.usStock') + $t('account.account_right.56hpz2mff80')
                  "
                  v-else-if="level.US.level == 1"
                />
                <img
                  :src="require('@/assets/img/icon_v2d.png')"
                  :title="
                    $t('m.usStock') + $t('account.account_right.56hpz5mqx80')
                  "
                  v-else
                />
              </el-tooltip>
            </span>
            <span class="quotation" v-else>
              <img
                :src="require('@/assets/img/icon_v0x.png')"
                title="$t('account.account_right.56hpz2j563x80')"
                v-if="level.SG.level == 0"
              />
              <img
                :src="require('@/assets/img/icon_v1d.png')"
                :title="$t('account.account_right.56hpz2mff80')"
                v-else-if="level.SG.level == 1"
              />
              <img
                :src="require('@/assets/img/icon_v2d.png')"
                :title="$t('account.account_right.56hpz5mqx80')"
                v-else
              />
            </span>
            <span class="country">
              <img
                :src="require('@/assets/img/icon_ggxx.png')"
                :title="$t('account.account_right.56hpz2m01v40')"
                v-if="stockInfo.detail.market == 'HKEX'"
              />
              <img
                :src="require('@/assets/img/icon_mgdd.png')"
                :title="$t('account.account_right.56hpz2m023o0')"
                v-else-if="stockInfo.detail.market == 'US'"
              />
              <img
                :src="require('@/assets/img/icon_hsdd.png')"
                :title="$t('account.account_right.56hpz2m02d00')"
                v-else-if="
                  stockInfo.detail.market == 'SZSE' && stockInfo.detail.tag != 0
                "
              />
              <img
                :src="require('@/assets/img/icon_hsdd.png')"
                :title="$t('account.account_right.56hpz2m02lc0')"
                v-else-if="
                  stockInfo.detail.market == 'SSE' && stockInfo.detail.tag != 0
                "
              />
            </span>
            <span>
              <img
                :src="require('@/assets/img/icon_zgdd.png')"
                :title="$t('account.account_right.56hpz2m02ts0')"
                v-show="
                  stockInfo.detail.market == 'SZSE' ||
                  stockInfo.detail.market == 'SSE'
                "
              />
            </span>
          </div>
        </div>
        <div class="tradeTime" v-if="detail.market != 'US'">
          <span v-if="detail.latestTime"
            >{{ stockInfo.market.statusStr }} {{ detail.latestTime | date
            }}{{ $t("m.Beijing_time") }}</span
          >
        </div>
        <div class="tradeTime" v-else>
          <span v-if="detail.latestTime"
            >{{ stockInfo.market.statusStr }}
            {{ detail.latestTime | toNewYork }} {{ $t("m.US_East_Savings") }}</span
          >
        </div>
      </div>
      <div
        v-if="
          financeQuestion.detail &&
          financeQuestion.detail != 'undefined' &&
          financeQuestion.detail != null
        "
      >
        <div
          class="Margintradingadata"
          v-if="
            stockInfo.detail.isSupportFinance == 1 &&
            stockInfo.detail.isSupportShort == 1
          "
        >
          <h2>{{ $t("account.index_dialog.56hqfs5emkg0") }}</h2>
          <ul class="f-cb">
            <li>
              {{ $t("account.index_dialog.56hqfs5enrk0")
              }}<span
                >{{
                  (financeQuestion.detail.buyLongRate * 100).toFixed(0)
                }}%</span
              >
            </li>
            <li>
              {{ $t("account.index_dialog.56hqfs5eo280") }}
              <span
                >{{
                  (financeQuestion.detail.shortSellRate * 100).toFixed(0)
                }}%</span
              >
            </li>
            <li>
              {{ $t("account.index_dialog.56hqfs5eob00") }}
              <span
                >{{
                  (financeQuestion.detail.buyLongKeepRate * 100).toFixed(0)
                }}%</span
              >
            </li>
            <li>
              {{ $t("account.index_dialog.56hqfs5eoj40") }}
              <span
                >{{
                  (financeQuestion.detail.shortSellKeepRate * 100).toFixed(0)
                }}%</span
              >
            </li>
            <li>
              {{ $t("account.index_dialog.56hqfs5eouo0") }}
              <span
                >{{
                  (financeQuestion.detail.shortSellFeeRate * 100).toFixed(0)
                }}%</span
              >
            </li>
            <li>
              {{ $t("account.index_dialog.56hqfs5ep3k0") }}
              <span>{{
                financeQuestion.detail.shortSellSurplus | changeNum(te)
              }}</span>
            </li>
          </ul>
        </div>
        <div
          class="Margintradingadata"
          v-else-if="
            stockInfo.detail.isSupportFinance == 1 &&
            stockInfo.detail.isSupportShort == 0
          "
        >
          <h2>{{ $t("account.index_dialog.56hqfs5epbk0") }}</h2>
          <ul class="f-cb">
            <li>
              {{ $t("account.index_dialog.56hqfs5enrk0")
              }}<span
                >{{
                  (financeQuestion.detail.buyLongRate * 100).toFixed(0)
                }}%</span
              >
            </li>
            <li>
              {{ $t("account.index_dialog.56hqfs5eob00") }}
              <span
                >{{
                  (financeQuestion.detail.buyLongKeepRate * 100).toFixed(0)
                }}%</span
              >
            </li>
          </ul>
        </div>
        <div
          class="Margintradingadata"
          v-else-if="
            stockInfo.detail.isSupportFinance == 0 &&
            stockInfo.detail.isSupportShort == 1
          "
        >
          <h2>{{ $t("account.index_dialog.56hqfs5epk40") }}</h2>
          <ul class="f-cb">
            <li>
              {{ $t("account.index_dialog.56hqfs5eo280") }}
              <span
                >{{
                  (financeQuestion.detail.shortSellRate * 100).toFixed(0)
                }}%</span
              >
            </li>
            <li>
              {{ $t("account.index_dialog.56hqfs5eoj40") }}
              <span
                >{{
                  (financeQuestion.detail.shortSellKeepRate * 100).toFixed(0)
                }}%</span
              >
            </li>
            <li>
              {{ $t("account.index_dialog.56hqfs5eouo0") }}
              <span
                >{{
                  (financeQuestion.detail.shortSellFeeRate * 100).toFixed(0)
                }}%</span
              >
            </li>
            <li>
              {{ $t("account.index_dialog.56hqfs5ep3k0") }}
              <span>{{
                financeQuestion.detail.shortSellSurplus | changeNum(te)
              }}</span>
            </li>
          </ul>
        </div>
      </div>
      <el-form
        ref="form"
        :model="form"
        label-position="left"
        label-width="80px"
        class="form_drawer"
      >
        <!-- 方向 -->
        <el-form-item :label="$t('m.direction')" class="f-cb">
          <div class="f-cb">
            <div
              class="direction"
              v-for="item in directionList"
              :key="item.direction"
              @click="tradeTypeList(item)"
              :class="
                form.direction !== item.direction
                  ? ''
                  : item.direction == 1
                  ? 'hover'
                  : 'green'
              "
            >
              {{ item.title }}
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <span slot="label" class="type_label">
            {{ `${$t("m.Types_of")}` }}
            <img
              @click="tipVisible = true"
              class="label_icon"
              src="@/assets/img/icon_bbxxh.png"
              alt=""
            />
          </span>
          <!-- 港、美股价格类型 -->
          <el-select
            v-if="
              stockInfo.detail.market == 'HKEX' ||
              stockInfo.detail.market == 'US'
            "
            :disabled="disableEdit"
            v-model="form.priceType"
            :placeholder="$t('account.index_dialog.56hqfs5epsk0')"
            :popper-append-to-body="false"
            @change="changePriceType(form.priceType)"
          >
            <el-option
              v-for="item in priceType"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- A股不需要市价单 -->
          <el-select
            :disabled="disableEdit"
            v-model="form.priceType"
            :placeholder="$t('account.index_dialog.56hqfs5epsk0')"
            :popper-append-to-body="false"
            @change="changePriceType(form.priceType)"
            v-else
          >
            <el-option
              v-for="item in priceType1"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('account.index_dialog.56hqfs5eq480')">
          <!-- 市价单仅有当日有效 -->
          <input
            v-if="form.priceType == 2"
            type="text"
            disabled
            :placeholder="$t('account.index_dialog.56hqfs5eqfg0')"
            class="disabled_input"
          />
          <!-- 仅卖出，做空状态有效期列表存在指定日期前有效 -->
          <el-select
            :disabled="disableEdit"
            v-else-if="form.direction == 2 && form.tradeType == 2"
            v-model="form.expireType"
            :placeholder="$t('account.index_dialog.56hqfs5epsk0')"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in expireTypeList2"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- 有效期 -->
          <el-select
            v-else
            :disabled="disableEdit"
            v-model="form.expireType"
            :placeholder="$t('account.index_dialog.56hqfs5epsk0')"
            :popper-append-to-body="false"
          >
            <el-option
              v-for="item in expireTypeList1"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 有效期为指定日期前有效时显示 -->
        <!-- 限价，止损的沽空，指定日期有效显示日期 -->
        <el-form-item
          :label="$t('account.index_dialog.56hqfs5eqno0')"
          v-if="
            (form.priceType == 3 || form.priceType == 1) &&
            form.expireType == 3 &&
            form.direction == 2 &&
            form.tradeType == 2
          "
        >
          <el-date-picker
            class="checkDate"
            :disabled="disableEdit"
            v-model="form.expireDate"
            type="date"
            :picker-options="pickerOptions"
            :placeholder="$t('account.index_dialog.56hqfs5eqw00')"
            :format="`yyyy-MM-dd ${$t('account.index_dialog.56hqfs5er440')}`"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>

        <!-- 价格 -->
        <el-form-item
          :label="
            form.priceType != 3
              ? $t('m.price')
              : $t('account.index_dialog.56hqfs5erbw0')
          "
          v-show="Number(form.priceType) !== 2"
        >
          <!-- 港股价格计步器 -->
          <InputNumber
            v-if="stockInfo.detail.market == 'HKEX'"
            @priceNumber="priceNumber"
            :priceType="form.priceType"
            :currenPrice="currenPrice"
            :direction="form.direction"
          ></InputNumber>
          <!-- 沪深价格计步器 -->
          <el-input-number
            v-else-if="
              stockInfo.detail.market == 'SSE' ||
              stockInfo.detail.market == 'SZSE'
            "
            v-model="currenPrice"
            :step="0.01"
            :precision="2"
            :placeholder="
              form.priceType == 3 && form.direction == 1
                ? $t('account.index_dialog.56hq45s5wkk0')
                : form.priceType == 3 && form.direction == 2
                ? $t('account.index_dialog.56hwwqs5wkk0')
                : ''
            "
            @change="priceNumber"
          ></el-input-number>
          <!-- 美股价格计步器 -->
          <el-input-number
            v-else
            v-model="currenPrice"
            :step="currenPrice >= 1 ? 0.01 : 0.001"
            :precision="currenPrice >= 1 ? 2 : 3"
            :placeholder="
              form.priceType == 3 && form.direction == 1
                ? $t('account.index_dialog.56hq45s5wkk0')
                : form.priceType == 3 && form.direction == 2
                ? $t('account.index_dialog.56hwwqs5wkk0')
                : ''
            "
            @change="priceNumber"
          ></el-input-number>
        </el-form-item>
        <!-- 价格 市价单 -->
        <el-form-item :label="$t('m.price')" v-show="form.priceType == 2">
          <input
            type="text"
            disabled
            :placeholder="$t('m.Market_price')"
            class="disabled_input"
          />
        </el-form-item>
        <!-- 可买数量 -->
        <el-form-item
          :label="
            form.priceType != 3
              ? $t('m.Quantity')
              : form.direction == 1
              ? $t('account.index_dialog.56hqfs5erk80')
              : $t('account.index_dialog.56hqfs5ersg0')
          "
        >
          <!-- 改单修改数量 -->
          <el-input-number
            v-if="tradeForm"
            v-model="form.tradeNum"
            :step="detail.lotSize"
            :step-strictly="true"
            :min="min"
            :max="max"
            @change="handleChange"
          ></el-input-number>
          <!-- 正常买入修改数量 -->
          <el-input-number
            v-else
            v-model="form.tradeNum"
            :step="detail.lotSize"
            step-strictly
            :min="min"
            @change="handleChange"
          ></el-input-number>
        </el-form-item>
        <!-- 仓位 -->
        <el-radio-group
          size="small"
          v-model="PositionModel"
          @change="cangClick"
        >
          <el-radio-button
            :label="item.value"
            v-for="(item, index) in TradeNumList"
            :key="index"
            >{{ item.title }}</el-radio-button
          >
        </el-radio-group>
        <ul class="details f-cb on">
          <li v-if="form.direction == 1">
            <span class="fl"
              >{{ $t("account.index_dialog.56hqfs5es080") }}
              <i v-if="buyNum">{{ buyNum | formatNumberRgx }}</i>
              <i v-else>--</i></span
            >
            <span
              class="fr"
              v-if="
                rzbuyNum &&
                stockInfo.detail.isSupportFinance == 1 &&
                user.assetType == 2
              "
              >{{ $t("account.index_dialog.56hqfs5es8o0") }}
              <i>{{ rzbuyNum | formatNumberRgx }}</i></span
            >
            <span class="fr" v-else
              >{{ $t("account.index_dialog.56hqfs5es8o0") }} <i>--</i>
            </span>
          </li>
          <li v-else>
            <span class="fl"
              >{{ $t("account.index_dialog.56hqfs5esl80") }}
              <i v-if="sellNum">{{ sellNum | formatNumberRgx }}</i>
              <i v-if="!sellNum">--</i>
            </span>
            <span
              class="fr"
              v-if="
                rqbuyNum &&
                stockInfo.detail.isSupportShort == 1 &&
                user.assetType == 2
              "
              >{{ $t("account.index_dialog.56hqfs5estg0") }}
              <i>{{ Number(rqbuyNum) | formatNumberRgx }}</i></span
            >
            <span class="fr" v-else
              >{{ $t("account.index_dialog.56hqfs5estg0") }} <i>--</i>
            </span>
          </li>
          <li v-if="user.totalNum != 0">
            <span
              class="fl"
              v-if="form.direction == 2 && form.tradeType == 1 && tradeForm"
              >{{ `${$t("account.index_dialog.56hwwqs555k0")}` }}
              <i>{{ Number(positionNum) | formatNumberRgx }}</i>
            </span>
            <!-- 持仓数量 -->
            <span class="fl" v-else
              >{{ $t("account.index_dialog.56hwwqs555k0") }}
              <i>{{ Number(user.totalNum) | formatNumberRgx }}</i>
            </span>
            <span class="fr"
              >{{ $t("account.index_dialog.56hqfs5et100") }}
              <i>{{ user.buyAvgPrice }}</i></span
            >
          </li>
          <li
            v-if="
              tradeForm &&
              (tradeForm.direction != 1 || tradeForm.tradeType != 2)
            "
          >
            <span class="fl">{{
              $t("account.index_dialog.56hqfs5et7o0")
            }}</span>
            <span class="fr fff">{{ tradeMold }}</span>
          </li>
          <li
            v-else-if="
              !tradeForm && (form.direction != 1 || form.tradeType != 2)
            "
          >
            <span class="fl">{{
              $t("account.index_dialog.56hqfs5et7o0")
            }}</span>
            <span class="fr fff">{{ tradeMold }}</span>
          </li>
          <li>
            <span class="fl">{{
              $t("account.index_dialog.56hqfs5ete00")
            }}</span>
            <span class="fr fff">
              <i v-if="tradePrice != 'NaN'">{{
                Number(tradePrice).toFixed(2) | formatNumberRgx
              }}</i>
              <i v-else>--</i>
            </span>
          </li>
        </ul>
        <ul class="details f-cb">
          <li>
            <span class="fl">{{
              $t("account.index_dialog.56hqfs5etk80")
            }}</span>
            <span class="fr fff">
              <i v-if="user.balance != 'NaN'">{{
                Number(user.balance).toFixed(2) | formatNumberRgx
              }}</i>
              <i v-else>--</i>
            </span>
          </li>
          <li>
            <span class="fl">{{
              $t("account.index_dialog.56hqfs5etqo0")
            }}</span>
            <span class="fr fff">
              <i v-if="user.financeMoney != 'NaN'">{{
                Number(user.financeMoney) | formatNumberRgx
              }}</i>
              <i v-else>--</i>
            </span>
          </li>
          <li>
            <span class="fl">{{
              $t("account.index_dialog.56hqfs5etx80")
            }}</span>
            <span class="fr fff">{{ detail.currency }}</span>
          </li>
          <li>
            <span class="fl">{{
              $t("account.index_dialog.56hqfs5eu3w0")
            }}</span>
            <span class="fr fff">
              <i v-if="brokerage != 'NaN'">{{
                Number(brokerage).toFixed(2) | formatNumberRgx
              }}</i>
              <i v-else>--</i>
            </span>
          </li>
        </ul>
      </el-form>
      <div style="height: 70px"></div>
    </div>
    <div class="account-trade f-cb">
      <div class="button">
        <div class="fix">
          <button v-if="user.tradePass == 0" @click="open3">
            {{ $t("m.transactionPassword") }}
          </button>
          <!-- checkTrade：检测交易密码状态，0：解锁交易，1：直接交易，tradePass: 0:未设置交易密码 -->
          <button
            @click="passVisible = true"
            v-show="checkTrade == 0 && user.tradePass == 1"
            slot="reference"
          >
            <!-- 解锁交易 -->
            {{ $t("account.index_dialog.56qtpxytrow0") }}
          </button>
          <button
            v-if="checkTrade == 1"
            :class="form.direction == 1 ? 'red' : 'green'"
            @click="buyPrice"
          >
            {{ directionItem.title }}
          </button>
        </div>
      </div>
    </div>
    <el-dialog
      width="340px"
      :visible="passVisible"
      :append-to-body="true"
      :show-close="false"
      :destroy-on-close="true"
      top="20%"
    >
      <SixPassword @hidePass="hidePass"></SixPassword>
    </el-dialog>
    <el-dialog
      width="680px"
      :visible="tipVisible"
      :append-to-body="true"
      :show-close="false"
      :destroy-on-close="true"
      top="12%"
      class="tip_dialog"
    >
      <type-tip @hideTip="hideTip"></type-tip>
    </el-dialog>
    <OrderDetailDialog
      :businessChild="businessChild"
      :detail="detail"
      @closeClick="closeClick"
      @hide="hide"
      v-if="businessChild.jiaoyiVisible"
      @reset1="reset1"
    ></OrderDetailDialog>
    <!-- 货币兑换 -->
    <ExchangeDialog
      ref="exchange"
      :show="exchangeShow"
      :exchangeMarket="exchangeMarket"
      @close="ClosePopup"
    ></ExchangeDialog>
  </div>
</template>
<script>
import {get_common_reckon} from '@/assets/js/API/system.js';
import {get_create_order} from '@/assets/js/API/order.js';
import InputNumber from "@/components/common/InputNumber";
import OrderDetailDialog from "@/components/account/right/OrderDetailDialog.vue";
import ExchangeDialog from "@/components/account_dialog/ExchangeDialog";
import SixPassword from "@/components/account/right/SixPassword.vue";
import TypeTip from "@/components/tip/type_tip.vue";
import { newwsJYtype, exchangeType } from "@/assets/js/filters";
import dayjs from "dayjs";
import * as timezone from "dayjs/plugin/timezone"; // import plugin
export default {
  props: {
    tradeForm: Object,
    tradeDirection: Number,
  },
  components: {
    InputNumber,
    OrderDetailDialog,
    ExchangeDialog,
    SixPassword,
    TypeTip,
  },
  data() {
    return {
      passVisible: false,
      password: "",
      checkTrade: 0, //是否解锁交易  1解锁 0 未解锁
      valur: "",
      form: {
        symbol: "",
        securityType: 1,
        market: "",
        assetType: 1, //账户类型 1：普通账户 2：融资账户
        // outsideRth: 0, //盘前盘后 0：不允许 1：允许
        tradeNum: 0, //交易数量
        tradePrice: "", //交易价格
        direction: 1, //交易方向: 1:买入 2：卖出
        tradeType: "", //交易方向: 1:做多 2：做空
        priceType: 1, //价格类型: 1:限价单 2:市价单 3:止损单 POST传
        expireType: 1, //有效期：1：当日有效 2：撤销前有效 3：指定日期前有效
        expireDate: "", // 具体过期时间，仅过期时间类型3时有值
      },
      directionList: [], // 方向的数组
      directionItem: {}, //获取到的方向值
      priceType: [
        { title: this.$i18n.t("m.Market_order"), id: 2 }, // 市价单
        { title: this.$i18n.t("m.Limit_order"), id: 1 }, // 限价单
        { title: this.$i18n.t("m.Condition_sheet"), id: 3 }, // 止损单
      ], //价格类型数组
      priceType1: [
        { title: this.$i18n.t("m.Limit_order"), id: 1 }, // 限价单
        { title: this.$i18n.t("m.Condition_sheet"), id: 3 }, // 止损单
      ], //类型数组
      expireTypeList1: [
        { title: this.$t("account.index_dialog.56hqfs520go0"), id: 1 }, // 当日有效
        { title: this.$t("account.index_dialog.56hqfswsugo0"), id: 2 }, // 撤销前有效
      ], //仅卖出，做空状态有效期列表存在指定日期前有效
      expireTypeList2: [
        { title: this.$t("account.index_dialog.56hqfs520go0"), id: 1 }, // 当日有效
        { title: this.$t("account.index_dialog.56hqfswsugo0"), id: 2 }, // 撤销前有效
        { title: this.$t("account.index_dialog.56hqf2ceugo0"), id: 3 }, // 指定日期前有效
      ], //有效期列表
      currenPrice: null, // 当前价格
      TradeNumList: [
        { title: "1/4", value: 0.25 },
        { title: "1/3", value: 0.3333 },
        { title: "1/2", value: 0.5 },
        { title: this.$i18n.t("m.Full_warehouse"), value: 1 },
      ],
      businessChild: {
        jiaoyiVisible: false, //显示隐藏
        stockList: {}, // 股票信息
        form: {}, //订单数据
        balance: null, //现金金额 用于判断是否显示融资的内容。
        lombardRate: null, //若启用融资，显示利率
        shortSellFeeRate: 0, // 做空利率
        brokerage: 0, // 佣金
      },
      detail: {}, // 当前股票信息
      stock: {}, // // 当前股票类型
      user: {}, // 用户账户信息
      rzbuyNum: 0, //融资最大股数
      rqbuyNum: 0, //融券最大股数
      buyNum: 0, //现金可买股数最大
      sellNum: 0, // 可卖数量
      PositionModel: null, //仓位选择后的数值
      brokerage: 0, //佣金及费用（估算）
      reckonList: {}, //佣金的数值 如0.0029%等
      CloseList: {}, //卖出时使用到的内容 目前只有美股有卖出
      tradePrice: null, // 交易金额
      pickerOptions: {
        disabledDate(time) {
          let curDate = new Date().getTime() - 24 * 3600 * 1000;
          let three = 91 * 24 * 3600 * 1000;
          let threeMonths = curDate + three;
          return time.getTime() < curDate || time.getTime() > threeMonths;
        }, // 时间选择器范围为当前时间+三个月
      },
      exchangeShow: false, // 货币兑换对话框开关
      disableEdit: false, // 改单时不可选择的状态
      maxCang: 0, // 当前方向全仓数量
      dailyInterest: 0, // 融资日息, 0:港股，1：美股，2：A股
      min: 0, // 交易最小数量
      max: 0, // 最大交易数量
      tradeMold: "", // 交易方式
      positionNum: 0, // 当前持仓数量
      exchangeMarket: "", // 货币兑换的默认市场类型
      tipVisible: false, // 类型解释对话框
      symbolObject: {
        latestPrice: "",
        chg: "",
        gain: "",
      }, //当前股票对象
      levelShow: false, // 展示等级
      marketType: 2, // 市场类型
    };
  },
  filters: {
    date(val) {
      return dayjs(val * 1000).format("MM-DD HH:mm");
    },
    // 纽约时间为GMT-5
    toNewYork(val) {
      return dayjs(val * 1000)
        .tz("America/Toronto")
        .format("HH:mm");
    },
  },
  created() {},
  mounted() {
    this.axiosALL({
      securityType: this.stockInfo.detail.securityType,
      symbol: this.stockInfo.detail.symbol,
      market: this.stockInfo.detail.market,
    });
    if (
      this.stockInfo.detail.market == "US" ||
      this.stockInfo.detail.market == "HKEX"
    )
      this.form.priceType = 2;
  },
  methods: {
    // 隐藏对话框
    hide() {
      // 清空兑换框数据
      this.init();
      this.$emit("hideTrade");
    },
    hideTip() {
      this.tipVisible = false;
    },
    // 交易完成后冒出到account_right报价页面
    reset1() {
      this.$emit("reset");
    },
    init() {
      this.directionList = [];
      this.directionItem = {};
      this.form = {};
      this.rqbuyNum = 0;
      this.rzbuyNum = 0;
      this.buyNum = 0;
      this.sellNum = 0;
      this.max = 0;
      this.min = 0;
    },
    hidePass(val) {
      if (val == 1) {
        this.checkTrade = 1;
      }
      this.passVisible = false;
    },
    // 仓位玩法
    cangClick() {
      this.form.tradeNum = Math.ceil(this.PositionModel * this.maxCang);
      if (this.form.tradeNum < this.stockInfo.detail.lotSize) {
        // 当前股数不足一手时显示0
        this.form.tradeNum = 0;
      } else {
        this.form.tradeNum =
          this.form.tradeNum -
          (this.form.tradeNum % this.stockInfo.detail.lotSize);
      }
      if (this.detail.market) {
        this.brokerageList(
          this.form.tradePrice,
          this.form.tradeNum,
          this.detail.market,
          this.reckonList,
          this.CloseList
        );
      }
    },
    // 切换买入卖出时判断是否支持做空
    tradeTypeList(value) {
      if (this.disableEdit == true)
        return this.$message.info(this.$t("account.index_dialog.56hqfs5euac0"));
      this.PositionModel = null;
      // 不支持做空，且股数为0
      if (this.detail.isSell == 0 && this.user.restNum <= 0) {
        this.$message({
          showClose: true,
          message: this.$t("account.index_dialog.56hqfs5eugo0"),
          type: "warning",
        });
        this.directionItem = this.directionList[0];
        return false;
      } else {
        this.directionItem = this.directionList[value.direction - 1];
      }
      this.tradeTypeDefault(value);
      this.form.expireType = this.expireTypeList1[0].id;
      this.form.expireDate = "";
      this.currenPrice = this.stockInfo.detail.latestPrice;
      this.numMAx();
      this.brokerage = 0.0;
      this.form.tradeNum = 0;
      this.judgeModel();
    },
    // 计步器中的买卖价格变化后触发
    priceNumber(price) {
      // 计步器组件中的变量变化后存储到currenPrice
      this.currenPrice = price;
      // 将当前价格存入买卖提交表单中
      this.form.tradePrice = this.currenPrice;
      this.numMAx();
      if (this.detail.market) {
        this.brokerageList(
          this.currenPrice,
          this.form.tradeNum,
          this.detail.market,
          this.reckonList,
          this.CloseList
        );
      }
      // if (this.tradeForm) {
      //   this.judgeDirection(this.tradeForm);
      // }
      this.judgeModel();
    },
    // 数量变化时触发,当超过现金可买，可卖数量时，启用融资或融券
    handleChange(value) {
      this.PositionModel = null;
      // 市价单，价格为最新价
      if (this.form.priceType == 2) {
        this.currenPrice = this.stockInfo.detail.latestPrice;
      }
      this.tradePrice = Number(this.currenPrice * value).toFixed(2);
      if (this.detail.market != null || this.detail.market != "") {
        this.brokerageList(
          this.currenPrice,
          this.form.tradeNum,
          this.detail.market,
          this.reckonList,
          this.CloseList
        );
      }
      this.judgeModel();
    },
    // 交易方式判断
    judgeModel() {
      if (this.form.direction == 1) {
        // 买入
        if (this.user.assetType == 1 || this.stock.isSupportFinance == 0) {
          // 标准账户，或不支持融资
          this.tradeMold = this.$t("m.cashBuy"); // 现金购买
        } else {
          // 融资账户
          if (this.tradeForm) {
            if (this.tradeForm.isFinance == 1) {
              this.tradeMold = this.$t("m.rzBuy"); // 融资购买
            } else {
              this.tradeMold = this.$t("account.index_dialog.56hqfs5eun80");
            }
          } else {
            if (
              this.form.tradePrice * this.form.tradeNum + this.brokerage >
              this.user.balance
            ) {
              this.tradeMold = this.$t("m.rzBuy"); // 融资购买
            } else {
              this.tradeMold = this.$t("account.index_dialog.56hqfs5eun80");
            }
          }
        }
      } else {
        // 卖出
        if (this.form.tradeType == 1) {
          this.tradeMold = this.$t("account.index_dialog.56hqfs5esl80"); // 可卖数量
        } else {
          this.tradeMold = this.$t("account.index_dialog.56hqfs5estg0"); // 融券可卖
        }
      }
    },
    // 取最大最小值范围内的手续费，isStamp表示是否是印花税，贷款利息
    maxmin(totalPrice, current, max, min, isStamp, isDaily) {
      let currentFee = Number(current * totalPrice);
      // 印花税需向上取整后再做最大最小值判断
      if (isStamp == true) {
        currentFee = Math.ceil(currentFee);
      }
      // 融资日息 = （融资利率 * 贷款金额）/ 365
      if (isDaily == true) {
        currentFee = currentFee / 365;
      }
      if (max == "" || max == null || max == undefined) {
        // 无最大值
        if (min == "" || min == null || min == undefined)
          return Number(currentFee);
        // 无最小
        else return Number(currentFee <= min ? min : currentFee); // 无最大有最小
      } else {
        // 有最大值,无最小
        if (min == "" || min == null || min == undefined)
          return Number(currentFee >= max ? max : currentFee);
      }
      return Number(
        currentFee <= min ? min : currentFee >= max ? max : currentFee
      );
    },
    /**
     *
     * 佣金及费用（估算）
     * params {number} price  成交价
     * params {number} num    成交数量=成交股数
     * params {string} marker 当前股的市场
     * params {object} List   当前市场佣金的值
     * params {object} close  当前市场卖出佣金的值
     *
     * **/
    brokerageList(price, num, market, List, Close) {
      price = Number(price);
      num = Number(num);
      if (price == 0 || num == 0) {
        this.brokerage = 0;
        return false;
      }
      /**
       *
       *{number} TradVal       交易市值 = 成交价 * 成交股数
       *{number} TradComm       交易佣金：0.029%*交易市值     （交易市值=成交价*成交数量）
       *{number} PlatformFee    平台费：18港币 /一笔订单
       *{number} TradFee        交易费：0.005%*交易市值+0.5港币
       *{number} TradPayment    结算交收费：0.002%*交易市值（最低2港币，最高100港币）
       *{number} TradLevy       交易征费：0.0027%*交易市值  （最低0.01港币）
       *{number} StampDuty      印花税：0.1%*交易市值（不足1港币当作1港币计算，向上取整）
       *
       * **/
      // 港股佣金
      if (market.toLowerCase() == "hkex") {
        let TradVal,
          TradComm,
          TradFee,
          TradPayment,
          TradLevy,
          StampDuty,
          PlatformFee;
        TradVal = price * num;
        TradComm = this.maxmin(
          TradVal,
          List.commission,
          List.commission_,
          List._commission
        );
        TradFee = this.maxmin(
          TradVal,
          List.tradeFee,
          List.tradeFee_,
          List._tradeFee
        );
        TradPayment = this.maxmin(
          TradVal,
          List.settlement,
          List.settlement_,
          List._settlement
        );
        TradLevy = this.maxmin(
          TradVal,
          List.tradeLevy,
          List.tradeLevy_,
          List._tradeLevy
        );
        StampDuty = this.maxmin(
          TradVal,
          List.stampDuty,
          List.stampDuty_,
          List._stampDuty,
          true
        );
        PlatformFee = Number(List.platformFee);
        this.brokerage =
          Number(
            TradComm +
              TradFee +
              TradPayment +
              TradLevy +
              StampDuty +
              PlatformFee
          ) + 0.5;
        console.log(
          TradComm,
          TradFee,
          TradPayment,
          TradLevy,
          StampDuty,
          PlatformFee,
          this.brokerage,
          "sd"
        );
        this.brokerage = Math.round(this.brokerage * 100) / 100;
      } else if (market.toLowerCase() == "us") {
        let MtradComm,
          MTradVal,
          MtradPatment,
          MPlatformFee,
          MSFCFees = 0,
          MtransFee = 0;
        // MADR;
        /**
         *
         *{number}    MtradComm        交易佣金：$0.0039*交易股数，最低$0.99/单
         *{number}    MtradPatment        交收费：$0.00396*成交股数，，最低$0.99/单
         *{number}    MPlatformFee        平台费：$0.004*交易股数，最低$1/订单
         *{number}    MSFCFees       证监会规费【仅卖出收取】：$0.0000221*交易金额（最低$0.01）
         *{number}    MtransFee        交易活动费【仅卖出收取】：$0.000119*卖出数量，（最低$0.01，最高$5.95）
         *{number}    MADR        ADR（美国预托证券）：每股$0.01-0.03之间 (后台设置)
         *
         * **/
        // MtradComm = Number(
        //   List.commission * num <= List._commission
        //     ? List._commission
        //     : List.commission * num >= List.commission_
        //     ? List.commission_
        //     : List.commission * num
        // );
        MtradComm = this.maxmin(
          num,
          List.commission,
          List.commission_,
          List._commission
        );
        // MtradPatment = Number(
        //   List.paymentFee * num <= List._paymentFee
        //     ? List._paymentFee
        //     : List.paymentFee * num >= List.paymentFee_
        //     ? List.paymentFee_
        //     : List.paymentFee * num
        // );
        MtradPatment = this.maxmin(
          num,
          List.paymentFee,
          List.paymentFee_,
          List._paymentFee
        );
        // MPlatformFee = Number(
        //   List.platformFee * num <= List._platformFee
        //     ? List._platformFee
        //     : List.platformFee * num >= List.platformFee_
        //     ? List.platformFee_
        //     : List.platformFee * num
        // );
        MPlatformFee = this.maxmin(
          num,
          List.platformFee,
          List.platformFee_,
          List._platformFee
        );
        if (this.form.direction == 2) {
          // MSFCFees = Close.SFCFee * num * price;
          // MSFCFees = Number(
          //   Close.SFCFee * num <= Close._SFCFee
          //     ? Close._SFCFee
          //     : MSFCFees >= Close.SFCFee_
          //     ? Close.SFCFee_
          //     : MSFCFees
          // );
          MSFCFees = this.maxmin(
            num * price,
            Close.SFCFee,
            Close.SFCFee_,
            Close._SFCFee
          );
          // MtransFee = Close.tradeActivityFee * num;
          // MtransFee = Number(
          //   MtransFee <= Close._tradeActivityFee
          //     ? Close._tradeActivityFee
          //     : MtransFee >= Close.tradeActivityFee_
          //     ? Close.tradeActivityFee_
          //     : MtransFee
          // );
          MtransFee = this.maxmin(
            num,
            Close.tradeActivityFee,
            Close.tradeActivityFee_,
            Close._tradeActivityFee
          );
        }
        // MADR = Number(List.ADR * num);
        this.brokerage =
          MtradComm + MtradPatment + MPlatformFee + MSFCFees + MtransFee;
        this.brokerage = Math.round(this.brokerage * 100) / 100;
        console.log(
          this.brokerage,
          MtradComm,
          MtradPatment,
          MPlatformFee,
          MSFCFees,
          MtransFee
        );
      } else {
        /**
         * A股通佣金计算
         *{number}    CNtradComm        交易佣金：0.00029*交易股数，最低5/单    
         *{number}    CNPlatformFee        平台费：15元/笔【平台】
      
         *{number}    CNHandel       经手费：0.00487%×成交金额，最低0.01元 【上交所/深交所】
         *{number}    CNManage       证管费：0.002%×成交金额，最低0.01元【中国证监会】
         *{number}    CNStampDuty       印花税【仅卖单收取】：0.1%×成交金额【国家税务总局】需向上取整
         *{number}    CNTransFee       过户费：0.002%×成交金额，最低0.01元【中国结算_上海/中国结算_深圳】
         *{number}    CNTransFee1       登记过户费：0.002%×成交金额，最低0.01元【香港结算】
         *
         * **/
        let CNTradVal,
          CNtradComm,
          CNManage,
          CNPlatformFee,
          CNHandel,
          CNStampDuty,
          CNTransFee,
          CNTransFee1;
        CNTradVal = Number(price * num);
        CNtradComm = Number(
          this.maxmin(
            CNTradVal,
            List.commission,
            List.commission_,
            List._commission
          )
        );
        CNPlatformFee = Number(List.platformFee);
        // 经手费
        CNHandel = this.maxmin(
          CNTradVal,
          List.handlingFee,
          List.handlingFee_,
          List._handlingFee
        );
        // 证管费
        CNManage = this.maxmin(
          CNTradVal,
          List.certificationFee,
          List.certificationFee_,
          List._certificationFee
        );
        // let isStamp = true;
        // 印花税,仅卖出时收取
        CNStampDuty = this.maxmin(
          CNTradVal,
          Close.stampDuty,
          Close.stampDuty_,
          Close._stampDuty,
          true
        );
        // 过户费
        CNTransFee = this.maxmin(
          CNTradVal,
          List.transferFee,
          List.transferFee_,
          List._transferFee
        );
        // 登记过户费
        CNTransFee1 = this.maxmin(
          CNTradVal,
          List.registerTransferFee,
          List.registerTransferFee_,
          List._registerTransferFee
        );
        // 卖出方向
        if (this.form.direction == 2) {
          this.brokerage = Number(
            CNtradComm +
              CNHandel +
              CNManage +
              CNStampDuty +
              CNTransFee +
              CNTransFee1 +
              CNPlatformFee
          );
        } else {
          this.brokerage = Number(
            CNtradComm +
              CNHandel +
              CNManage +
              CNTransFee +
              CNTransFee1 +
              CNPlatformFee
          );
        }
        this.brokerage = Math.round(this.brokerage * 100) / 100;
      }
    },
    // 融资融券最大股数算法
    maxStock(balance, rate, price) {
      let maxNum, maxFee, num;
      // 融资
      maxNum = balance / price / rate;
      if (this.detail.market) {
        this.brokerageList(
          price,
          maxNum,
          this.detail.market,
          this.reckonList,
          this.CloseList
        );
      }
      maxFee = this.brokerage;
      // 改单页面无需除以1.03
      if (this.tradeForm) {
        num = (balance / rate - maxFee) / price;
      } else num = (balance / rate - maxFee) / price / 1.03;
      // 最大可购买数量向下取整
      num = Math.floor(num);
      // 最大可购数量
      return num - (num % this.detail.lotSize);
    },
    // 触发价格改变时触发的事件
    // 最大股数的变换
    numMAx() {
      this.detail.latestPrice = Number(this.detail.latestPrice);
      let restTotal = this.user.restNum;
      // isSell==0表示该股票不支持做空
      if (this.detail.isSell == 0) {
        if (this.form.direction == 1) {
          this.sellNum = 0;
          this.rqbuyNum = 0;
          // 买入
          // 现金最大可购数量
          this.buyNum = this.maxStock(this.user.balance, 1, this.currenPrice);
          this.maxCang = this.buyNum;
          if (this.stock.isSupportFinance == 1) {
            // 不支持做空，支持融资
            // 融资最大可购数量
            this.rzbuyNum = this.maxStock(
              this.user.balance,
              this.stock.buyLongRate,
              this.currenPrice
            );
          }
        } else {
          // 卖出做多
          this.buyNum = 0;
          this.rzbuyNum = 0;
          this.sellNum = this.user.restNum;
          this.maxCang = this.sellNum;
        }
      } else {
        // 支持做空
        if (this.form.direction == 1) {
          this.sellNum = 0;
          this.rqbuyNum = 0;
          // 方向买入
          if (this.form.tradeType == 2) {
            // 买入做空
            this.buyNum = 0;
            this.rzbuyNum = 0;
            this.maxCang = Math.abs(Number(this.user.restNum));
          } else {
            // 买入做多
            // 现金可购数量
            this.buyNum = this.maxStock(this.user.balance, 1, this.currenPrice);
            // 全仓数量
            this.maxCang = this.buyNum;
            if (this.stock.isSupportFinance == 1) {
              // 支持融资
              // 融资最大可购数量
              this.rzbuyNum = this.maxStock(
                this.user.balance,
                this.stock.buyLongRate,
                this.currenPrice
              );
            }
          }
        } else {
          // 方向卖出
          this.buyNum = 0;
          this.rzbuyNum = 0;
          if (this.tradeForm) {
            restTotal = this.user.restNum + this.tradeForm.tradeNum;
          }
          // 融券卖出
          if(this.directionItem.tradeType && this.directionItem.tradeType == 2) {
            this.sellNum = 0;
            this.rqbuyNum = this.maxStock(
              this.user.balance,
              this.stock.shortSellRate,
              this.currenPrice
            );
            this.maxCang = this.rqbuyNum;
          }else {
            this.sellNum = restTotal;
            this.maxCang = this.sellNum;
          }
          // if (restTotal > 0) {
          //   // 有持仓卖出做多
          //   // 有持仓
          //   this.sellNum = restTotal;
          //   this.maxCang = this.sellNum;
          // } else {
          //   // 无持仓卖出做空
          //   this.sellNum = 0;
          //   this.rqbuyNum = this.maxStock(
          //     this.user.balance,
          //     this.stock.shortSellRate,
          //     this.currenPrice
          //   );
          //   this.maxCang = this.rqbuyNum;
          // }
        }
      }
    },
    // 触发价格类型改变的事件
    changePriceType(type) {
      // 如果是市价单，有效期仅有当日有效，且价格为当前最新价
      if (type == 2) {
        this.form.expireDate = "";
        this.currenPrice = this.stockInfo.detail.latestPrice;
      }
        this.form.expireType = 1;
    },
    // 设置方向的默认参数值
    tradeTypeDefault(value) {
      this.form = Object.assign({}, this.form, {
        tradeType: value.tradeType,
        direction: value.direction,
      });
    },
    async axiosALL(obj) {
      // 获取数据
      const acct = await get_create_order(obj);
      //  佣金计算器 /api/common/reckon
      if (acct.code != 1) return this.$message.error(acct.msg);
      const perms = await get_common_reckon(obj);
      if (perms.code != 1) return this.$message.error(perms.msg);
      this.detail = acct.data.detail;
      this.stock = acct.data.stock;
      this.user = acct.data.user;
      this.form.tickSize = this.detail.tickSize;
      this.form.tradePrice = Number(this.detail.latestPrice);
      this.form.assetType = Number(this.user.assetType);
      this.detail.lotSize = Number(this.detail.lotSize); //最小购买笔数进行转换为number
      this.checkTrade = this.user.checkTrade;
      if (
        (perms.data.fee &&
          perms.data.detail &&
          perms.data.detail.market == "SSE") ||
        perms.data.detail.market == "SZSE"
      ) {
        this.reckonList = perms.data.fee.open.CN;
        this.CloseList = perms.data.fee.close.CN;
      } else {
        this.reckonList = perms.data.fee.open[perms.data.detail.market];
        this.CloseList = perms.data.fee.close[perms.data.detail.market];
      }
      // 如果有tradeForm则是改单交易
      if (this.tradeForm) {
        this.form = Object.assign({}, this.form, this.tradeForm);
        this.editForm(this.tradeForm);
        this.disableEdit = true;
      } else {
        // 非改单交易
        // 获取数据进行处理成为方向的数据  start
        var te = newwsJYtype;
        this.directionList = te(
          acct.data.user.assetType,
          acct.data.detail.isSell,
          acct.data.user.tradeType,
          acct.data.user.direction,
          this.te
        );
        // end
        if (
          this.detail.isSell == 0 &&
          this.user.restNum <= 0 &&
          this.tradeDirection == 1
        ) {
          this.$message({
            showClose: true,
            message: this.$t("account.index_dialog.56hqfs5eugo0"),
            type: "warning",
          });
          this.directionItem = this.directionList[0];
        } else {
          this.directionItem = this.directionList[this.tradeDirection];
        }
        this.tradeTypeDefault(this.directionItem);
        this.numMAx(); // 根据购买方式输出相应最大的股数
        this.judegBalance();
      }
      this.firstTradeType = this.form.tradeType;
      if (this.tradeForm) {
        this.brokerage = Math.round(this.tradeForm.tradeFee * 100) / 100;
      } else this.brokerage = 0.0;
      this.judgeModel();
    },
    // 改单数据处理
    editForm(editform) {
      let te = newwsJYtype;
      this.directionList = te(
        this.user.assetType,
        this.detail.isSell,
        editform.tradeType,
        editform.direction,
        this.te
      );
      this.directionItem = this.directionList[this.tradeForm.direction - 1];
      this.tradeTypeDefault(this.directionItem);
      // 现金余额 = 目前现金余额 + 本笔订单冻结金额
      this.user.balance =
        Number(this.user.balance) + Number(editform.tradeFreeze);
      // 最大最小可买可卖数量
      this.numMAx();
      // 传入方向
      this.judgeDirection(editform);
    },
    // 改单方向判断
    judgeDirection(editform) {
      // 做多
      if (editform.tradeType == 1) {
        // 买入
        if (editform.direction == 1) {
          // 融资
          if (editform.isFinance) {
            // 已成交股数与现金可买股数取最大值+1手
            this.min =
              Number(this.buyNum) >= Number(editform.dealNum)
                ? Number(this.buyNum)
                : Number(editform.dealNum);
            this.min = this.min + Number(this.detail.lotSize);
            // （当前现金余额+本笔冻结金额）下最大融资可买数量
            this.max = this.rzbuyNum;
          } else {
            // 非融资
            // 本笔改单已成交数量+1手
            this.min = Number(editform.dealNum) + Number(this.detail.lotSize);
            // （当前现金余额+本笔冻结金额）下的现金可买数量
            this.max = this.buyNum;
          }
        } else {
          // 卖出
          // 本笔改单已成交数量+1手
          this.min = Number(editform.dealNum) + Number(this.detail.lotSize);
          // 本笔订单的委托数量+可用数量rest_num
          this.max = Number(editform.tradeNum) + Number(this.user.restNum);
          // 持仓数量 = 总持仓 - 当前委托的已成交数量
          this.positionNum = Number(this.user.totalNum);
        }
      } else {
        // 做空
        // 卖出
        if (editform.direction == 2) {
          // 本笔改单已成交数量+1手
          this.min = Number(editform.dealNum) + Number(this.detail.lotSize);
          // （当前现金余额+本笔冻结金额）下的融券可卖数量
          this.max = Number(this.rqbuyNum);
        } else {
          // 买入平仓
          // 本笔改单已成交数量+1手
          this.min = Number(editform.dealNum) + Number(this.detail.lotSize);
          // 本笔订单委托数量+（当前持仓可用数量able_num）绝对值
          this.max = Math.abs(Number(editform.ableNum)) + Number(editform.tradeNum);
          this.maxCang = this.max;
        }
      }
    },
    // judgeDirection(editform) {
    //   // 买入方向
    //   if (editform.direction == 1) {
    //     // 融资做多
    //     if (editform.isFinance) {
    //       // 最小可买数量 = 当前现金可买股数
    //       this.min = Number(this.buyNum);
    //       this.max = this.rzbuyNum;
    //     } else {
    //       // 非融资交易
    //       if (editform.tradeType == 2) {
    //         // 买入做空
    //         // 最小值：已成交数量
    //         this.min = editform.dealNum;
    //         // 本笔订单的委托数量 + restNum,取绝对值
    //         this.max =
    //           Math.abs(Number(this.user.restNum)) + Number(editform.restNum);
    //         this.maxCang = this.max;
    //         console.log(
    //           this.maxCang,
    //           this.max,
    //           this.user,
    //           editform.restNum,
    //           this.$t("account.index_dialog.56hqfs5euw00")
    //         );
    //         this.buyNum = 0;
    //         this.rzbuyNum = 0;
    //       } else {
    //         // 买入做多（现金买入）
    //         this.min = Number(editform.dealNum);
    //         this.max = this.buyNum;
    //       }
    //     }
    //   } else {
    //     // 卖出
    //     if (editform.tradeType == 2) {
    //       // 卖出做空
    //       // 最小，已成交大于1手
    //       this.min = editform.dealNum;
    //       // this.rqbuyNum = this.rqbuyNum - editform.restNum;
    //       this.max = this.rqbuyNum;
    //     } else {
    //       // 卖出做多
    //       // 最小=已成交数量
    //       this.min = editform.dealNum;
    //       // 最大=当前持仓数量 + 待成交数量
    //       this.max = Number(this.user.restNum) + Number(editform.restNum);
    //       // 可卖数量 持仓+未成交数量
    //       this.sellNum = this.max;
    //       this.rqbuyNum = 0;
    //       this.maxCang = this.sellNum;
    //       // 持仓数量 = 总持仓 - 当前委托的已成交数量
    //       this.positionNum =
    //         Number(this.user.totalNum) - Number(editform.dealNum);
    //     }
    //   }
    // },
    // 判断现金余额为0时且需要花钱时提示
    async judegBalance() {
      let te = exchangeType;
      let bizhong = te(this.stockInfo.detail.currency, this.te);
      if (this.user.balance <= 0) {
        if (this.form.direction == 1) {
          // 买入做多提示余额不足
          if (this.form.tradeType == 1) {
            const confirmInfo = await this.$confirm(
              `${this.$t("account.index_dialog.56hqfs51qr00")} ${bizhong}?`,
              this.$t("account.index_dialog.56hqfs5ev300"),
              {
                confirmButtonText: this.$t("account.index_dialog.56hqfs5evao0"),
                cancelButtonText: this.$t("account.index_dialog.56hqfs5evhs0"),
                type: "warning",
              }
            ).catch((err) => err);
            if (confirmInfo !== "confirm")
              return this.$message.info(
                this.$t("account.index_dialog.56hqfs5evo00")
              );
            this.exchangeMarket = this.stockInfo.detail.currency;
            this.exchangeShow = true;
            this.$refs.exchange.getDirection();
            this.$refs.exchange.getType();
            return (this.flag = false);
          }
        } else {
          // 卖出做空提示余额不足
          if (this.form.tradeType == 2) {
            const confirmInfo = await this.$confirm(
              `${this.$t("account.index_dialog.56hqfs51qr00")} ${bizhong}?`,
              this.$t("account.index_dialog.56hqfs5ev300"),
              {
                confirmButtonText: this.$t("account.index_dialog.56hqfs5evao0"),
                cancelButtonText: this.$t("account.index_dialog.56hqfs5evhs0"),
                type: "warning",
              }
            ).catch((err) => err);
            if (confirmInfo !== "confirm")
              return this.$message.info(
                this.$t("account.index_dialog.56hqfs5evo00")
              );
            this.exchangeMarket = this.stockInfo.detail.currency;
            this.exchangeShow = true;
            this.$refs.exchange.getDirection();
            this.$refs.exchange.getType();
            return (this.flag = false);
          }
        }
      }
      return (this.flag = true);
    },
    // 买卖判断 买入卖出沽空平仓
    async buyPrice() {
      let positionNum = Number(this.user.totalNum);
      // if (this.tradeForm) {
      //   // 改单持仓
      //   if (this.tradeForm.tradeType == 1) {
      //     // 做多改单,tradeForm.restNum改单待成交数量
      //     positionNum = positionNum + Number(this.tradeForm.restNum);
      //   } else {
      //     // 做空改单，当前持仓数量可能是负值
      //     positionNum = positionNum - Number(this.tradeForm.restNum);
      //   }
      // }
      this.judegBalance();
      if (!this.flag) return false;
      if (
        this.form.tradePrice <= 0 ||
        this.form.tradeNum <= 0 ||
        this.form.tradePrice == null ||
        this.form.tradeNum == null
      ) {
        this.$message({
          showClose: true,
          message: this.$t("account.index_dialog.56hqfs5evug0"),
          type: "warning",
        });
        return false;
      } else if (this.form.direction == 1) {
        // 持仓大于等于0，非买入做空
        if (positionNum >= 0) {
          // 不支持融资，或为标准账户
          if (this.stock.isSupportFinance == 0 || this.user.assetType == 1) {
            if (this.form.tradeNum > this.buyNum) {
              // 超过最大可买数量
              this.$message({
                showClose: true,
                message: this.$t("account.index_dialog.56hqfs5ew0s0"),
                type: "warning",
              });
              return false;
            }
          } else {
            // 支持融资，且为融资账户
            // 订单数量大于最大融资可买数量
            if (this.form.tradeNum > this.rzbuyNum)
              // 大于最大融资金额
              return this.$message.error(
                this.$t("account.index_dialog.56hqfs5ew0s0")
              );
          }
        } else {
          // 买入做空
          if (this.tradeForm) {
            // 改单
            if (this.form.tradeNum > this.max) {
              return this.$message.error(
                this.$t("account.index_dialog.56hqfs5ew0s0")
              );
            }
          } else {
            // 正常交易
            if (this.form.tradeNum > 0 - positionNum) {
              return this.$message.error(
                this.$t("account.index_dialog.56hqfs5ew0s0")
              );
            }
          }
        }
      } else if (this.form.direction == 2) {
        if (positionNum == 0) {
          // 无持仓
          if (this.detail.isSell == 0)
            // 不支持融券
            return this.$message.error(
              this.$t("account.index_dialog.56hqfs5ew780")
            );
          else {
            // 支持融券,标准账户
            if (this.user.assetType == 1) {
              return this.$message.error(
                this.$t("account.index_dialog.56hqfs5ewdc0")
              );
            } else {
              // 融资账户
              if (this.form.tradeNum > this.rqbuyNum) {
                return this.$message.error(
                  this.$t("account.index_dialog.56hqfs5ewkk0")
                );
              }
            }
          }
        } else if (positionNum > 0) {
          // 改单持仓数量>0,当前持仓数量=0
          if (this.user.restNum == 0) {
            // 无持仓，且为改单交易
            if (this.form.tradeNum > this.sellNum) {
              // 账户不支持融资或为标准账户
              if (
                this.user.assetType == 1 ||
                this.stockInfo.detail.isSupportFinance != 1
              ) {
                return this.$message.error(
                  this.$t("account.index_dialog.56hqfs5asr00")
                );
              } else
                return this.$message.error(
                  this.$t("account.index_dialog.56hqfs5ewr00")
                );
            }
          } else if (this.user.restNum > 0) {
            if (this.form.tradeNum > this.sellNum) {
              return this.$message.error(
                this.$t("account.index_dialog.56hqfs5ewkk0")
              );
            }
          }
        } else {
          // 账户为标准账户，或非融券股票
          if (this.user.assetType == 1 || this.detail.isSell != 1) {
            return this.$message.error(
              this.$t("account.index_dialog.56hqfs5ewdc0")
            );
          } else {
            // 融资账户，支持融券
            if (this.detail.isSell == 1) {
              if (this.form.tradeNum > this.rqbuyNum) {
                return this.$message.error(
                  this.$t("account.index_dialog.56hqfs5ewkk0")
                );
              }
            }
          }
        }
      }
      this.loan =
        Number(this.tradePrice) +
        Number(this.brokerage) -
        Number(this.user.balance);
      // this.dailyInterest = Number(
      //   (this.reckonList.lombardRate * this.loan) / 365
      // );
      this.dailyInterest = this.maxmin(
        this.loan,
        this.reckonList.lombardRate,
        this.reckonList.lombardRate_,
        this.reckonList._lombardRate,
        false,
        true
      );
      this.form.symbol = this.detail.symbol;
      this.form.market = this.detail.market;
      this.form.securityType = this.detail.securityType;
      this.businessChild = {
        jiaoyiVisible: true, // 显示隐藏
        stockList: this.detail, // 股票信息
        form: this.form, // 订单数据
        balance: this.user.balance, // 现金金额
        shortSellFeeRate: this.stock.shortSellFeeRate, // 做空利率
        brokerage: this.brokerage, // 佣金
        changeOrder: this.disableEdit, // 改单状态,ture为改单，false为新建订单
        loan: this.loan, // 贷款金额
        dailyInterest: this.dailyInterest, // 日息
      };
    },
    closeClick() {
      this.businessChild.jiaoyiVisible = false;
    },
    open3() {
      this.$message({
        message: this.$i18n.t("m.information"),
        type: "warning",
      });
    },
    ClosePopup(msg) {
      this.exchangeShow = false;
    },
    // 展示当前等级
    showLevel(type) {
      this.levelShow = true;
      this.marketType = type;
      if (type == 3) {
        this.$refs.level.myQuotation("US");
        this.$refs.level.initCharge(type);
      } else if (type == 1) {
        this.$refs.level.myQuotation("CN");
        this.$refs.level.initCharge(type);
      } else {
        this.$refs.level.myQuotation("HK");
        this.$refs.level.initCharge(type);
      }
    },
    // 关闭当前等级
    closeLevel() {
      this.levelShow = false;
    },
  },
  computed: {
    stockInfo() {
      if (!this.tradeForm)
        this.currenPrice = this.$store.state.index.stockInfo.detail.latestPrice;
      else this.currenPrice = this.tradeForm.tradePrice;
      return this.$store.state.index.stockInfo;
    },
    level() {
      return this.$store.state.index.level;
    },
    accountType() {
      return this.$store.state.index.accountType;
    },
    financeQuestion() {
      return this.$store.state.index.financeQuestion;
    },
  },
  beforeUpdate() {
    this.tradePrice = (this.form.tradePrice * this.form.tradeNum).toFixed(2);
  },
};
</script>
<style lang="less">
@import "~@/assets/less/dateCheck.less";
.transaction {
  i {
    font-style: normal;
  }
  position: absolute;
  // height: calc(100% - 60px);
  height: 100%;
  overflow: auto;
  // top: 60px;
  left: 0;
  .pb115 {
    height: 100%;
    overflow: auto;
  }
  .el-form {
    padding: 0 20px 0;
    .el-form-item {
      margin: 20px 0;
    }
    .el-form-item__label {
      color: @fbSix;
      line-height: 30px;
    }
    .el-form-item__content {
      line-height: 30px;
    }
    .direction {
      float: left;
      width: 120px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: @bgColor;
      color: @fbSix;
      border-radius: 3px;
      cursor: pointer;
    }
    .direction.hover {
      background: @red;
      color: @fff;
    }
    .direction.green {
      background: @green;
      color: @fff !important;
    }
    .direction:nth-child(2) {
      float: right;
    }
    .el-select {
      .el-input {
        line-height: 30px;
        height: 30px;
        font-size: 12px;
        color: @fff;
      }
      width: 100%;
      .el-input__inner {
        background-color: @bgColor;
        height: 30px;
        color: @fff;
        text-align: center;

        padding: 0 30px;
        line-height: 30px;
        border: 1px solid @bgColor;
      }
      .el-select-dropdown {
        background-color: @bgColor;
        border: 1px solid @bgColor;
        .el-select-dropdown__item {
          color: @fff;
        }
        .popper__arrow::after,
        .popper__arrow {
          border-bottom-color: @bgColor;
        }
      }
      .el-select__caret {
        line-height: 30px;
        color: @fff;
      }
    }
    .el-date-editor {
      width: 100%;
      .el-input__inner {
        background-color: @LightBorderLine;
        height: 30px;
        border: 1px solid @LightBorderLine;
        color: @fff;
        text-align: center;
      }
      .el-input__prefix {
        // position: relative;
        .input__icon {
          line-height: 14px;
        }
      }
    }
    .el-input-number {
      width: 100%;
      line-height: 30px;
      .el-input__inner {
        background-color: @bgColor;
        border: 1px solid @bgColor;
        border-color: @bgColor !important;
        height: 30px;
        line-height: 30px;
        color: @fff;
      }
      .el-input-number__decrease,
      .el-input-number__increase {
        background: @bgColor;
      }
      .el-input-number__increase {
        border-left: 1px solid @DarkBorderLine;
      }
      .el-input-number__decrease {
        border-right: 1px solid @DarkBorderLine;
      }
    }
    .NumberChoice {
      width: 100%;
      margin-bottom: 10px;
      li {
        width: 70px;
        float: left;
        margin-left: calc((100% - 280px) / 3);
        text-align: center;
        font-size: 12px;
        color: @fbSix;
        background: @bgColor;
        line-height: 30px;
        cursor: pointer;
        border-radius: 3px;
        transition: all 0.3s;
      }
      li.hover,
      li:hover {
        background: @hoverColor;
        color: @fff;
      }
      li:first-child {
        margin-left: 0;
      }
    }
    .details {
      width: 100%;
      padding: 10px 0;
      li {
        float: left;
        width: 100%;
        font-size: 12px;
        color: @fbSix;
        line-height: 32px;
        .fff {
          color: @fff;
        }
        i {
          font-style: initial;
          color: @fff;
        }
      }
    }
    .details.on {
      padding-top: 0;
      border-bottom: 1px solid @LightBorderLine;
    }
  }
  .account-right-top {
    padding: 10px 0;
    border: 1px solid @LightBorderLine;
    .title {
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      color: @fff;
      font-size: 16px;
      line-height: 36px;
      .symbol_name {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        .titleName {
          padding-left: 20px;
          max-width: 160px;
          line-height: 36px;
          text-align: left;
          padding-right: 10px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
      .icon {
        height: 18px;
        cursor: pointer;
        margin-right: 20px;
        margin-top: 8px;
      }
    }
    .about-infis {
      font-size: 28px;
      color: @fff;
      line-height: 28px;
      position: relative;
      padding-left: 20px;
      padding-right: 10px;
      .hs1 {
        padding-right: 26px;
        font-weight: bold;
      }
      .smallfonts {
        font-size: 14px;
        margin-left: 12px;
      }
      .Icon {
        max-width: 100px;
        span {
          width: 20px;
          float: right;
          margin-left: 10px;
          img {
            width: 100%;
            cursor: pointer;
          }
        }
      }
    }
    .tradeTime {
      color: @fbSix;
      font-size: 12px;
      line-height: 23px;
      margin: 0 20px;
    }
  }
  .Margintradingadata {
    padding: 9px 20px 14px;
    border-bottom: 1px solid @LightBorderLine;
    h2 {
      font-size: 12px;
      color: @fff;
      line-height: 33px;
    }
    ul {
      width: 100%;
      li {
        float: left;
        font-size: 12px;
        color: @fbSix;
        width: 100%;
        line-height: 20px;
        span {
          float: right;
          color: @fff;
        }
      }
    }
  }
  .account-trade {
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 2px solid @DarkBorderLine;
    background: @deepBg;
    width: 100%;
    z-index: 2;
    h2 {
      color: @fbSix;
      font-size: 12px;
      line-height: 23px;
      padding: 10px 20px;
    }
    .button {
      padding-bottom: 20px;
      padding-top: 20px;
      .fix {
        text-align: center;
        font-size: 0;
        button {
          margin: 0 2.6%;
          height: 30px;
          line-height: 30px;
          border: none;
          width: 56%;
          font-size: 12px;
          color: @fff !important;
          border-radius: 3px;
          background-color: @hoverColor;
          &.red {
            background-color: @red;
          }
          &.green {
            background-color: @green;
          }
        }
      }
    }
  }
}
.disabled_input {
  width: 100%;
  background-color: @deepBg;
  color: @fff;
  font-size: 12px;
  height: 30px;
  text-align: center;
  border: 1px solid transparent;
}
.form_drawer {
  .type_label {
    .label_icon {
      height: 18px;
      cursor: pointer;
    }
  }
}
.tip_i {
  font-style: normal;
}
</style>
